<template>
  <!--hotsale-->
  <div class="clearfix hot-sale">
    <h4 class="title">热卖商品</h4>
    <div class="hot-list">
      <ul class="yui3-g">
        <li class="yui3-u-1-4">
          <div class="list-wrap">
            <div class="p-img">
              <img src="../../images/like_01.png" />
            </div>
            <div class="attr">
              <em>Apple苹果iPhone 6s (A1699)</em>
            </div>
            <div class="price">
              <strong>
                <em>¥</em>
                <i>4088.00</i>
              </strong>
            </div>
            <div class="commit">
              <i class="command">已有700人评价</i>
            </div>
          </div>
        </li>
        <li class="yui3-u-1-4">
          <div class="list-wrap">
            <div class="p-img">
              <img src="../../images/like_03.png" />
            </div>
            <div class="attr">
              <em>金属A面，360°翻转，APP下单省300！</em>
            </div>
            <div class="price">
              <strong>
                <em>¥</em>
                <i>4088.00</i>
              </strong>
            </div>
            <div class="commit">
              <i class="command">已有700人评价</i>
            </div>
          </div>
        </li>
        <li class="yui3-u-1-4">
          <div class="list-wrap">
            <div class="p-img">
              <img src="../../images/like_04.png" />
            </div>
            <div class="attr">
              <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
            </div>
            <div class="price">
              <strong>
                <em>¥</em>
                <i>4068.00</i>
              </strong>
            </div>
            <div class="commit">
              <i class="command">已有20人评价</i>
            </div>
          </div>
        </li>
        <li class="yui3-u-1-4">
          <div class="list-wrap">
            <div class="p-img">
              <img src="../../images/like_02.png" />
            </div>
            <div class="attr">
              <em>Apple苹果iPhone 6s (A1699)</em>
            </div>
            <div class="price">
              <strong>
                <em>¥</em>
                <i>4088.00</i>
              </strong>
            </div>
            <div class="commit">
              <i class="command">已有700人评价</i>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchHot",
};
</script>

<style scoped lang="less">
.hot-sale {
  margin-bottom: 5px;
  border: 1px solid #ddd;
  .title {
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    border-bottom: 1px solid #ddd;
    background: #f1f1f1;
    color: #333;
    margin: 0;
    padding: 5px 0 5px 15px;
  }
  .hot-list {
    padding: 15px;
    ul {
      display: flex;
      li {
        width: 25%;
        height: 100%;
        .list-wrap {
          .p-img,
          .price,
          .attr,
          .commit {
            padding-left: 15px;
          }
          .p-img {
            img {
              max-width: 100%;
              vertical-align: middle;
              border: 0;
            }
          }
          .attr {
            width: 85%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-bottom: 8px;
            min-height: 38px;
            cursor: pointer;
            line-height: 1.8;
          }
          .price {
            font-size: 18px;
            color: #c81623;
            strong {
              font-weight: 700;
              i {
                margin-left: -5px;
              }
            }
          }
          .commit {
            height: 22px;
            font-size: 13px;
            color: #a7a7a7;
          }
        }
      }
    }
  }
}
</style>
